<template>
  <div>
    <el-card style="width:98%;margin:30px auto;">
      <div clas="title" style="font-weight:bold;font-size:17px;margin-bottom:20px">阅卷
      </div>
      <el-table :data="paper" border stripe :header-cell-class-name="'headerBg'"    >

        <el-table-column prop="id" label="题目ID" width="60"  align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="题目名称"
          align="center"

          :formatter="stateFormat">
        </el-table-column>
        <el-table-column prop="type" label="题目类型" width="80">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.type === 1">选择题</el-tag>
            <el-tag type="warning" v-if="scope.row.type === 2">判断题</el-tag>
            <el-tag type="success" v-if="scope.row.type === 3">简答题</el-tag>

          </template>

        </el-table-column>
        <el-table-column prop="a" label="选项a" :formatter="stateFormat"></el-table-column>
        <el-table-column prop="b" label="选项b" :formatter="stateFormat"></el-table-column>
        <el-table-column prop="c" label="选项c" :formatter="stateFormat"></el-table-column>
        <el-table-column prop="d" label="选项d" :formatter="stateFormat"></el-table-column>

        <el-table-column prop="answer" label="标准答案" width="80" align="center"
                         :formatter="stateFormat"></el-table-column>
        <el-table-column prop="studentAnswer" label="学生答案" width="80" align="center"
                         :formatter="stateFormat"></el-table-column>
        <el-table-column prop="detail" label="解析" align="center" :formatter="stateFormat">
        </el-table-column>
        <el-table-column prop="score" label="标准分数" width="80" align="center"></el-table-column>
<!--        <el-table-column prop="studentScore" label="实际得分" align="center">
        </el-table-column>-->
        <el-table-column prop="studentScore" label="得分" width="80" align="center" >

          <template slot-scope="scope">
<!--            <el-input v-model="scope.row.studentScore" :disabled="scope.row.type==1 ||scope.row.type==2"></el-input>-->
         <span :style="{color:scope.row.studentScore==0?'red':'green',fontSize:'20px'}" >{{scope.row.studentScore}}</span>

          </template>

        </el-table-column>
              <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                  <el-button type="primary"  @click="look(scope.row)" >打分</el-button>
                </template>
              </el-table-column>
      </el-table>
      <div style="margin: 20px 0">
        <el-button type="primary" @click="submitScores()">提交分数</el-button>
      </div>

      <el-dialog class="dialogClass" title="题目信息" :visible.sync="addDialogVisible"  :destroy-on-close="true">
        <el-form label-width="80px" size="small" ref="form"  :model="form">
<!--          <el-form-item label="课程" prop="courseId">
            <el-select v-model="form.courseId" placeholder="请选择课程">
              <el-option v-for="item in courses" :label="item.name" :value="item.id" :key="item.id"></el-option>

            </el-select>
          </el-form-item>-->
          <el-form-item label="题目名称:" >
                  {{form.name}}
          </el-form-item>
          <el-form-item label="题目类型:" >
            <el-tag type="primary" v-if="form.type === 1">选择题</el-tag>
            <el-tag type="warning" v-if="form.type === 2">判断题</el-tag>
            <el-tag type="success" v-if="form.type === 3">简答题</el-tag>
          </el-form-item>

          <div v-if="form.type== 1">
            <el-form-item label="选项a:">
              <el-input type="text" v-model="form.a" disabled/>
            </el-form-item>
            <el-form-item label="选项b:">
              <el-input type="text" v-model="form.b" disabled/>
            </el-form-item>
            <el-form-item label="选项c:">
              <el-input type="text" v-model="form.c" disabled/>
            </el-form-item>
            <el-form-item label="选项d:" v-if="form.d">
              <el-input type="text" v-model="form.d" disabled/>
            </el-form-item>
          </div>


          <el-form-item label="标准分数:" >
            {{form.score}}
          </el-form-item>

          <el-form-item label="标准答案:" v-if="form.type==1">
            <el-radio v-model="form.answer" label="A" disabled>A</el-radio>
            <el-radio v-model="form.answer" label="B" disabled>B</el-radio>
            <el-radio v-model="form.answer" label="C" disabled>C</el-radio>
            <el-radio v-model="form.answer" label="D" disabled>D</el-radio>
          </el-form-item>

          <el-form-item label="标准答案" v-if="form.type==2" >
            <el-radio v-model="form.answer" label="是" disabled>是</el-radio>
            <el-radio v-model="form.answer" label="否" disabled>否</el-radio>
          </el-form-item>
          <el-form-item label="标准答案" v-if="form.type==3">
            <el-input type="textarea" v-model="form.answer" disabled autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="学生答案:" >
            <span style="color:green;font-size: 25px">{{form.studentAnswer}}</span>
          </el-form-item>
          <el-form-item label="题目解析:" prop="detail">
            <el-input type="textarea" :rows="5" maxlength="150"
                      disabled
                      placeholder="一次最多输入150个，多个换行输入"
                      v-model="form.detail" autocomplete="off"></el-input>
          </el-form-item>
          <hr/>
          <el-form-item label="本题得分:">
            <el-select v-model="form.studentScore" placeholder="请选择分值" filterable allow-create	>
              <el-option
                :disabled="form.type==2|| form.type==1"
                v-for="item in ([0],form.score)"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
<!--            <el-input v-model="form.studentScore" :disabled="form.type==1 ||form.type==2"></el-input>-->
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible=false" v-if="form.type==3">取 消</el-button>
          <el-button type="primary" @click="submitScore"  v-if="form.type==3">确 定</el-button>
        </div>
      </el-dialog>




    </el-card>
  </div>
</template>

<script>
export default {
  name: "handPaper",
  data() {
    return {
      sp: this.$route.query.id,
      paper: [],
    addDialogVisible:false,
      form:{}

    }
  },
  created() {
    this.request.get("/studentPaper/selectStudentPaperById/" + this.sp).then(res => {
      this.paper = JSON.parse(res.data.paper)
      if (this.paper && this.paper.length) {
        this.paper.forEach(s => {
          if(s.type==1 || s.type==2){
          if (s.answer == s.studentAnswer) {
            s.studentScore = s.score
          }else {
            if(s.studentScore){

            }else{
              s.studentScore=0
            }
          }
          }
        })
      }
    })

  }
  ,
  methods: {

    submitScores(){
      this.$router.push('/studentPaper')
    },
    look(row){
      this.form=row
      this.addDialogVisible=true
    },

    selectRow(row, column, event){
      console.log(row)

    },
    submitScore() {
      let sum = 0;
      this.paper.forEach(s => {
        // if (s.studentScore == null) {
        //   s.studentScore = 0
        // }
        sum +=Number( s.studentScore)
      })

      if (this.form.studentScore>this.form.score){
        this.$message.warning("分数不能大于标准分数")
        return
      }
      this.request.post("/studentPaper/save", {id: this.sp, score: sum,paper:JSON.stringify(this.paper)}).then(res => {
        console.log(this.sp)
        if(res.code==200){
          this.$message.success("打分成功")
          this.addDialogVisible=false

        }else {
          this.$message.error("打分失败");
        }
      })
    },

    stateFormat(row, column, cellValue) {
      if (!cellValue) return "";
      if (cellValue.length > 6) {
        //最长固定显示5个字符
        return cellValue.slice(0, 6) + "...";
      }
      return cellValue;
    },

  }
}
</script>

<style   scoped>


/deep/ el-dialog {
  width: 90%;
}



@media screen and (max-width: 440px) {
  /deep/ .el-dialog {
    width: 90%;
  }
}

@media only screen and (min-width:600px) and (max-width:1200px){
  .content {
    width:80%;
  }
}

</style>
